<template>
	<div>
		<a @click="$router.back(-1)" class="btn btn-primary" type="button" style="width: 100px;">返回</a>

		<table class="table">
		    <thead>
		      <tr>
		        <th>历史id</th>
		        <th>用户id</th>
		        <th>图书id</th>
		        <th>图书名</th>
		        <th>操作</th>
		        <th>操作时间</th>
		      </tr>
		    </thead>
		    <tbody>
		      <tr v-for="(item,index) in histories">
		        <td>{{item.histId}}</td>
		        <td>{{item.userId}}</td>
		        <td>{{item.bookId}}</td>
		        <td>{{item.bookName}}</td>
		        <td v-if="item.histAction == 0">借出</td>
		        <td v-else-if="item.histAction == 1">归还</td>
		        <td>{{item.histTime}}</td>
		      </tr>
		    </tbody>
		</table>

	</div>
</template>

<script>
	import {
		computed,
		reactive,
		toRefs,
		onMounted,
	} from "vue";
	import {
		useRouter,
		useRoute
	} from "vue-router";
	import {
		useStore,
	} from "vuex";
	import axios from "axios";

	export default {
		props: {
			//入口参数
		},
		components: {
			//引入组件
		},
		setup() {
			//实例化userouter
			const router = useRouter();
			const route = useRoute();
			const store = useStore();
			store.state.ifFrameShow = false;
			//onMounted()生命周期
			onMounted(() => {
				axios
					.post("Admin/QueryHistory")
					.then((response) => {
						data.histories = response.data.data
					})
					.catch((error) => console.log(error)); // 请求失败处理

				axios
					.get("Admin")
					.catch((error) => {
						console.log(error)
						if (error.status === 403) {
							alert("权限不足")
							router.push({
								name: 'Main'
							})
						}

					});
			});
			const data = reactive({
				histories: []
			});
			return {
				...toRefs(data),
			};
		},
	};
</script>


<style>

</style>
